<!DOCTYPE html>
<html>
    <head>
        <title>Rounded coordinates</title>
        <style>
            #mover {
                width:10px;
                height:10px;
                background:black;
            }
            #moved {
                width:5px;
                height:5px;
                background:red;
            }
            pre {
                position:absolute;
                top:220px;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id='mover'>
        <div id='moved'></div>
        </div>
        <pre id='report'></pre>
    <script src="benchmark.js"></script>
    <script>
    var suite = new Benchmark.Suite;
    // add tests
    suite
    .add('translate', function() {
        document.getElementById('mover').style.webkitTransform = 'translate(' +
            ~~(Math.random() * 200) + 'px,' + ~~(Math.random() * 200) + 'px)';
    })
    .add('translate3d', function() {
        document.getElementById('mover').style.webkitTransform = 'translate3d(' +
            ~~((Math.random() * 200)) + 'px,' + ~~((Math.random() * 200)) + 'px, 0px)';
    })
    .add('translate + scale', function() {
        document.getElementById('mover').style.webkitTransform = 'translate(' +
            ~~(Math.random() * 200) + 'px,' + ~~(Math.random() * 200) + 'px) scale(1, 1)';
    })
    .add('translate3d + scale', function() {
        document.getElementById('mover').style.webkitTransform = 'translate3d(' +
            ~~((Math.random() * 200)) + 'px,' + ~~((Math.random() * 200)) + 'px, 0px) scale(1, 1)';
    })
    .add('matrix3d', function() {
        document.getElementById('mover').style.webkitTransform = 'matrix3d(' +
            [1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            ~~(Math.random() * 200),
            ~~(Math.random() * 200),0,1].join(',') + ')';
    })
    .add('matrix3d-string', function() {
        document.getElementById('mover').style.webkitTransform = 'matrix3d(' +
            '1,0,0,0,0,1,0,0,0,0,1,0,' +
            (~~(Math.random() * 200)) + ',' +
            (~~(Math.random() * 200)) + ',0,1)';
    })
    // add listeners
    .on('cycle', function(event) {
        document.getElementById('report').innerHTML +=
          String(event.target) + '\n';
    })
    .on('complete', function() {
        document.getElementById('report').innerHTML +=
          'Fastest is ' + this.filter('fastest').pluck('name') + '\n';
    })
    // run async
    .run({ 'async': true });
</script>
</body>
